<template>
  <el-dialog v-bind="$attrs"  :model-value="modelValue"  :show-close="false" custom-class="modal">
    <slot name="header">
      <div class="head">
        <div class="title">{{$attrs.title}}</div>
        <div class="close" @click="closeModal"></div>
      </div>
    </slot>
    <slot></slot>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'TyModal',
  props: {
    modelValue: Boolean
  },
  setup(props, {emit}) {
    function closeModal() {
      emit('update:modelValue', false)
    }

    return {
      closeModal
    }
  }
})
</script>

<style lang="scss">
.modal {
  .el-dialog__header {
    padding: 0 !important;
    display: none !important;
    opacity: 0 !important;
  }
  .el-dialog__body {
    padding: 0 !important;
  }
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.25rem;
  background: #232036;
  line-height: 4.25rem;
  
  .title {
    text-align: left;
  text-indent: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #5d5c66;
  }

  .close {
    background-image: url(@/static/img/icon/close.png);
    width: 3.125rem;
    height: 3.125rem;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
}
</style>